<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<#include "../../common/header.html">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DHQ8Cbiq4G1Pugny9Fx5lg9eWIUIf2fW"></script>
<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
<style type="text/css">

.videoIntroduction{
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	text-indent: 1em;
}

</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">

		<!-- 	顶部和左侧菜单的jsp s -->
		<#include "../../common/menu.html">
		<!-- 	顶部和左侧菜单的jsp e -->

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper" style="text-align: center;">
		
			<div id="allmap"   style="width: 80%; height: 300px; alignment: center"></div>
			<div id="videoDiv" style="width: 50%;"></div>


			<!-- <video  width="885" height="600" id="myPlayer" poster="" controls playsInline webkit-playsinline autoplay >
				<source id="rtmpUrl" src="rtmp://rtmp.open.ys7.com/openlive/b8ace4ec402e4b7a878502dc1ea18217" type="" />
				<source id="httpUrl" src="http://hls.open.ys7.com/openlive/b8ace4ec402e4b7a878502dc1ea18217.m3u8"  type="application/x-mpegURL" />
			</video>
			<div class="videoIntroduction" id="detectorName">名称:</div>
			<div class="videoIntroduction" id="detectorAddress">地址:</div>
			<div class="videoIntroduction" id="detectorLongitude">经度</div>
			<div class="videoIntroduction" id="detectorLatitude">纬度</div>		 -->				
		</div>

	</div>
	<!-- ./wrapper -->
</body>
<script>
	
	var detectorResults = null;
	var getScreenShotControl = false;
    $(function() {
    	
    	initBaiduMap();
    	
    });

    //测试matlab
    function matlabTest() {
        console.log("matlabTest");
        $.ajax({
            type: "POST",
            url: "/traffic/show/matlabTest",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {

                alert("success");
                //前端顯示結果
                //setInterval(getScreenShot(trafficDetectorId),30000);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("网络繁忙，请稍后再试");
            },
        });
    }


    //开始截图
    function startScreenShot(trafficDetectorId) {
        getScreenShotControl = true;
        getScreenShot(trafficDetectorId);
    }



    //停止截图
    function toStopScreenShot() {
        getScreenShotControl = false;
    }

    function getScreenShot(trafficDetectorId) {
        //alert("getScreenShot trafficDetectorId =" + trafficDetectorId);
        if (!getScreenShotControl){
            return;
		}

        $.ajax({
            type: "POST",
            url: "/traffic/show/getScreenShot",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify({trafficDetectorId: trafficDetectorId}),
            success: function (result) {

                //前端顯示結果
                setInterval(getScreenShot(trafficDetectorId),30000);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("网络繁忙，请稍后再试");
            },
        });
    }

    //初始化地图数据
    function initBaiduMap() {
    	$.ajax({
            type: "POST",
            url: "/traffic/show/getAllDetectorData",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
              detectorResults = result;
              var map = new BMap.Map("allmap");
              var pointArray = new Array();
              $.each(result,function(i,n) {          	          	 
            	  var marker = new BMap.Marker(new BMap.Point(n.longitude, n.latitude)); // 创建点 
            	  marker.setTitle(n.trafficDetectorId)
            	  map.addOverlay(marker);    //增加点
            	  pointArray[i] = new BMap.Point(n.longitude, n.latitude);
              	  marker.addEventListener("click",attribute);      		
              });
              map.setViewport(pointArray);
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert("网络繁忙，请稍后再试");
            },
        });
    }
	
    
    function attribute(e){
    	var trafficDetectorId = e.target.z.title;
    	$.each(detectorResults,function(i,n) {
    		if(trafficDetectorId == n.trafficDetectorId) {
    			console.log(n);
    			var	str = '<video  width="450" height="300" id="myPlayer" poster="" controls playsInline webkit-playsinline autoplay >'
    			       +    '<source id="rtmpUrl" src="' + n.videoRtmpUrlHd + '" type=""' + '/>'
    			       +     '<source id="httpUrl" src="' + n.videoRtmpUrlHd + '" type="application/x-mpegURL"' + '/>'
    			       + '</video>'
                       + '<div>'
    			       + '<div class="videoIntroduction" id="detectorName">名称:' + n.name + '</div>'
    			       + '<div class="videoIntroduction" id="detectorAddress">地址:' + n.address + '</div>'
    			       + '<div class="videoIntroduction" id="detectorLongitude">经度:' + n.longitude + '</div>'
    			       + '<div class="videoIntroduction" id="detectorLatitude">纬度:' + n.latitude + '</div>'
    			       + '<div class="videoIntroduction" id="detectorLatitude">设备序列号:' + n.deviceSerial + '</div>'
                       + '<button type="button" onclick="startScreenShot(' + trafficDetectorId + ')">开始截图</button>'
                       + '<button type="button" onclick="toStopScreenShot()">停止</button>'
					   + '<button type="button" onclick="matlabTest()">测试matlab</button>'
                       + '</div>';
    			       
    			       $("#videoDiv").html(str);
    			       
    			       var player = new EZUIPlayer('myPlayer');
    			
    		}
    		
    	});
	}
</script>
</html>